(function(){	
		//if extension is loaded 
		var _temp_vf = document.getElementById("visualFirebug");
		if(_temp_vf && _temp_vf.style.display != "none"){
			_temp_vf.style.display = "none";
			window.visualFirebugTurnOn = false;
			return;
		}else if(_temp_vf && _temp_vf.style.display == "none"){
			_temp_vf.style.display = "block";
			if(document.getElementById("visualFirebug-switch").className == "vf-open"){
				window.visualFirebugTurnOn = true;
			}
			return;
		}else{
			if(!window.visualFirebugTurnOn){
				window.visualFirebugTurnOn = true;
			}
		}
		function getMSG(key){
		  		return chrome.i18n.getMessage(key);
		}

		/**
			*@name:Z
			*@author:zhouqicf@gmail.com
			*@site:www.zhouqicf.com
			*@version:1-0-0
			*/
		var Z = {};
		Z.moudles = {
				"baseUrl" : "http://www.zhouqicf.com/labs/youxiao/js/widget/",
				"degree" : {"js":"degree/form_degree.js","css":"degree/form_degree.css"},
				"color" : {"js":"color/form_color.js","css":"color/form_color.css"}
		}
		Z.get = function(id){
				return document.getElementById(id);
		}
		Z.getElementsByClassName = function(class){
				return document.getElementsByClassName(class);
		}
		Z.each = function(nodes,callback){
			for(var i=0,j=nodes.length;i<j;i++){
					callback(nodes[i]);
			}
		}
		Z.filter = function(nodes,callback){
				var newNodes = [];
				Z.each(nodes,function(node){
						if(callback(node)){
								newNodes.push(node);
						}
				});
				return newNodes;
		}
		Z.on = function(node,type,callback){
			if(typeof node === "string"){node = Z.get(node);}
				if(!node){return}
				if(window.attachEvent){
						node.attachEvent(type,callback);
				}else{
						node.addEventListener(type,callback,false);
				}
		}
		Z.getStyle = function(node,property){
				if(node.currentStyle){
						return node.currentStyle[property];
				}else if(window.getComputedStyle){
						return window.getComputedStyle(node,null)[property];
				}
		}
		Z.setStyle = function(node,property,value){
				node.style[property] = value;
		}
		Z.log = function(message){
				if(console){
						console.log(message);
				}
		}
		Z.isPressNum = function(e){
				var _keyCode = e.keyCode;
				if(
					(_keyCode > 64 && _keyCode < 91 && !(e.ctrlKey && (_keyCode == 65 || _keyCode == 67 || _keyCode == 86 || _keyCode == 88))) || 
					(e.shiftKey && (_keyCode < 58 && _keyCode > 47)) ||
					(_keyCode > 189 && _keyCode < 193) ||
					(_keyCode > 219 && _keyCode < 223) ||
					(_keyCode == 107 || _keyCode == 59 || _keyCode == 188 || _keyCode == 219) ||
					(_keyCode == 109 && e.shiftKey)
				){
					return false;
				}else{
					return true;
				}
		}
		Z.loader = function(moudle,callback){
				/*not use loader under chrome extension*/
				callback();
		}
		Z.Color = {
				"rgbToHex" : function(rgb){
						if(rgb === "transparent" || rgb === "rgba(0, 0, 0, 0)"){
								return "transparent";
						}
						var a = rgb.replace(/rgb\(|\)/g,"").split(","),
								hex = "";
						for (var i = 0;i < 3;i++){
								var b = parseInt(a[i]).toString(16);
								hex += (b.length === 1)?"0"+b:b;
						}
						return "#" + hex;
				},
				"hexToRgb" : function(hex){
						if(hex === "transparent" || hex === "rgba(0, 0, 0, 0)"){
								return "transparent";
						}
						var rgb = [
							parseInt(hex.substring(1,3),16),
							parseInt(hex.substring(3,5),16),
							parseInt(hex.substring(5,7),16)
						]
						return "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
				},
				"rgbToHsb" : function(rgb){
						if(rgb === "transparent" || rgb === "rgba(0, 0, 0, 0)"){
								return "transparent";
						}
						var a = rgb.replace(/rgb\(|\)/g,"").split(",");
						var nH,
								nS,
								nV,
								nR = a[0] / 255,
								nG = a[1] / 255,
								nB = a[2] / 255,
								nmax = Math.max(nR,nG,nB),
								nmin = Math.min(nR,nG,nB),
								ndelMax = nmax - nmin,
								ndelR,
								ndelG,
								ndelB;
				 
						nV = nmax;
						if(ndelMax === 0){
								nH = 0;
								nS = 0;
						}else{
								nS = ndelMax / nmax
								ndelR = (((nmax - nR) / 6) + (ndelMax / 2)) / ndelMax;
								ndelG = (((nmax - nG) / 6) + (ndelMax / 2)) / ndelMax;
								ndelB = (((nmax - nB) / 6) + (ndelMax / 2)) / ndelMax;
								if (nR === nmax){
										nH = ndelB - ndelG;
								}else if(nG === nmax){
										nH = (1 / 3) + ndelR - ndelB;
								}else if(nB === nmax){
										nH = (2 / 3) + ndelG - ndelR;
								}
								if(nH < 0){
										nH = nH + 1;
								}
								if(nH > 1){
										nH = nH - 1;
								}
						}
						return {
								"h" : Math.round(nH * 360),
								"s" : Math.round(nS * 100),
								"b" : Math.round(nV * 100),
						}
				},
				"hsbToRgb" : function(hsb){
						if(hsb === "transparent" || hsb === "rgba(0, 0, 0, 0)"){
								return "transparent";
						}
						var nH,nS,nV,
								nR,nG,nB,
								hi,f,p,q,t;
					 
						nH = hsb.h / 360;
						nS = hsb.s / 100;
						nV = hsb.b / 100;
						
						if(hsb.s === 0){
								nR = nG = nB = nV * 255;
						}else{
								hi = nH * 6
								if(hi === 6){
										hi = 0;
								}
								f = Math.floor(hi);
								p = nV * (1 - nS);
								q = nV * (1 - nS * (hi - f));
								t = nV * (1 - nS * (1 - (hi - f)));
								switch(f){
										case 0:
												nR = nV;
												nG = t;
												nB = p;
										break;
										case 1:
												nR = q;
												nG = nV;
												nB = p;
										break;
										case 2:
												nR = p;
												nG = nV;
												nB = t;
										break;
										case 3:
												nR = p;
												nG = q;
												nB = nV;
										break;
										case 4:
												nR = t;
												nG = p;
												nB = nV;
										break;
										default:
												nR = nV;
												nG = p;
												nB = q;
										break;
								}
						}
						return "rgb(" + Math.round(nR * 255) + "," + Math.round(nG * 255) + "," + Math.round(nB * 255) + ")";
				},
				"hexToComplate" : function(hex){
						if (hex.length === 4){
								var hex = hex.toLowerCase(),
										newHex = "";
										
								for (var i = 0;i < 3;i++){
										var a = hex.substring(i+1,i+2);
										newHex += a + a;
								}
								return "#" + newHex;
						}else{
								return hex;
						}
				},
				"getHexColor" : function(node,property){
						if(node.currentStyle){
								return node.currentStyle[property]==="transparent"?"transparent":this.hexToComplate(node.currentStyle[property]);
						}
						if(window.getComputedStyle){
								var color = window.getComputedStyle(node,null)[property];
								return color === "transparent" || color === "rgba(0, 0, 0, 0)"?"transparent":this.rgbToHex(color);
						}
				}
		};		
		/**
			*@name:form degree
			*@author:zhouqicf@gmail.com
			*@site:www.zhouqicf.com
			*@version:1-0-0
			*/
		function DegreeControl(wrap,param){
				var that = this;
				that.config = {
						"degree" : param.degree?param.degree:0,
						"afterChange" : param.afterChange?param.afterChange:function(){}
				}
					
				//create node
				that.vars = {
						"degreeWrap" : document.createElement("div"),
						"degree" : document.createElement("div"),
						"line" : document.createElement("i"),
						"dot" : document.createElement("b"),
						"label" : document.createElement("label"),
						"input" : document.createElement("input")
				}
				var _val = that.vars,
						_degreeWrap = _val.degreeWrap,
						_degree = _val.degree,
						_line = _val.line,
						_dot = _val.dot,
						_label = _val.label,
						_input = _val.input;
				
				_degreeWrap.className = "form-degree-wrap";
				_degree.className = "form-degree";
				_line.className = "form-degree-line";
				_dot.className = "form-degree-dot";
				_label.className = "form-degree-label";
				_input.className = "form-degree-input";
				
				_input.setAttribute("max",180);
				_input.setAttribute("min",-180);
				_degree.appendChild(_line);
				_degree.appendChild(_dot);
				_label.appendChild(_input);
				_degreeWrap.appendChild(_degree);
				_degreeWrap.appendChild(_label);
				Z.get(wrap).appendChild(_degreeWrap);
				
				//init degree
				that.setDegree(that.config.degree);
						
				//control events					
				var preXY = {},
						drag = false;
				Z.on(_degree,"mousedown",function(e){
						drag = true;
						Z.setStyle(document.documentElement,"webkitUserSelect","none");
						that.countDegree(e);
				});
				Z.on(document,"mouseup",function(e){
						drag = false;
						Z.setStyle(document.documentElement,"webkitUserSelect","");
				});
				Z.on(document,"mousemove",function(e){
						if (!drag) { return;}
						that.countDegree(e);
				});
				Z.on(_input,"change",function(e){
						var _value = this.value;
						if(_value > 180){
								_value = 180;
						}else if(_value < -180){
								_value = -180;
						}
						that.setDegree(_value);
				});
		}
		DegreeControl.prototype.countDegree = function(e){
				var _dot = this.vars.dot,
						_degree,
						_dotXY = {},
						_offset = {};
				
				_dotXY.x = _dot.getBoundingClientRect().left + 1;
				_dotXY.y = _dot.getBoundingClientRect().top + 1;
				
				if(navigator.userAgent.match(/Opera/)){
						_dotXY.x = (_dotXY.x - Math.max(document.body.scrollLeft,document.documentElement.scrollLeft))/2;
						_dotXY.y = (_dotXY.y - Math.max(document.body.scrollTop,document.documentElement.scrollTop))/2;
				}
				
				_offset.x = e.clientX - _dotXY.x;
				_offset.y = e.clientY - _dotXY.y;
				
				_degree = - Math.ceil(Math.atan2(_offset.y,_offset.x)*(360/(2*Math.PI)));
				this.setDegree(_degree);
		}
		DegreeControl.prototype.showDegree = function(){
				var _degree = this.config.degree,
						_line = this.vars.line,
						_value = "rotate("+(-_degree)+"deg)";
				Z.setStyle(_line,"MozTransform",_value);
				Z.setStyle(_line,"webkitTransform",_value);
				Z.setStyle(_line,"OTransform",_value);
				
				this.vars.input.value = _degree;
		}
		DegreeControl.prototype.setDegree = function(_degree){
				var that = this;
				if(that.isDegree(_degree)){
						this.config.degree = _degree;
						this.showDegree();
						this.onSetDegree();
				}else{
						//Z.log("\""+_degree+"\" is not a valid degree!");
				}
		}
		DegreeControl.prototype.onSetDegree = function(){
				this.config.afterChange(this.getDegree());
		}
		DegreeControl.prototype.getDegree = function(){
				return this.config.degree;
		}
		DegreeControl.prototype.isDegree = function(_degree){
				return /^-?1[0-7]\d$|^-?180$|^-?[1-9]\d$|^\d$|^-[1-9]$/.test(_degree);
		}		
		/**
			*@name:form color
			*@author:zhouqicf@gmail.com
			*@site:www.zhouqicf.com
			*@version:1-0-0
			*/
		function ColorControl(wrap,param){				
				var that = this;
				that.config = {
						"hex" : param.color?param.color:"transparent",
						"name" : param.name?param.name:"color-picker",
						"afterChange" : param.afterChange?param.afterChange:function(){}
				}
				
				var idRandom = Math.ceil(Math.random()*100000000000),
						html = '<input type="text" id="form-color-input-'+idRandom+'" class="form-color-input" name="'+that.config.name+'"/>' +
									 '<ol class="form-color-picker" id="form-color-picker-'+idRandom+'">' +
									 '    <li class="form-color-hsb form-color-hsbH">' +
									 '		    <div class="form-color-current"><label for="form-color-hsbH-curren-'+idRandom+'">Hue:</label><input type="text" id="form-color-hsbH-current-'+idRandom+'" min="0" max="360"/></div>' +
									 '		    <div class="form-color-hsb-img"></div>' +
									 '		    <div class="form-color-hsb-range"><input type="range" min="0" max="360" id="form-color-hsbH-'+idRandom+'"/></div>' +
									 '	  </li>' +
									 '    <li class="form-color-hsb form-color-hsbS">' +
									 '		    <div class="form-color-current"><label for="form-color-hsbS-curren-'+idRandom+'">Saturation:</label><input type="text" id="form-color-hsbS-current-'+idRandom+'" min="0" max="100"/></div>' +
									 '		    <div class="form-color-hsb-img"></div>' +
									 '		    <div class="form-color-hsb-range"><input type="range" min="0" max="100" id="form-color-hsbS-'+idRandom+'"/></div>' +
									 '	  </li>' +
									 '    <li class="form-color-hsb form-color-hsbB">' +
									 '		    <div class="form-color-current"><label for="form-color-hsbB-curren-'+idRandom+'">Lightness:</label><input type="text" id="form-color-hsbB-current-'+idRandom+'" min="0" max="100"/></div>' +
									 '		    <div class="form-color-hsb-img"></div>' +
									 '		    <div class="form-color-hsb-range"><input type="range" min="0" max="100" id="form-color-hsbB-'+idRandom+'"/></div>' +
									 '	  </li>' +
									 '</ol>';
				
				var editorWrap = document.createElement("div");
				editorWrap.id = "form-color-editorWrap-"+idRandom;
				editorWrap.className = "form-color-editorWrap";
				editorWrap.innerHTML = html;
				Z.get(wrap).appendChild(editorWrap);
				
				that.vars = {
						"picker" : Z.get("form-color-picker-"+idRandom),
						"hsbInput" : Z.get("form-color-input-"+idRandom),
						"hCurren" : Z.get("form-color-hsbH-current-"+idRandom),
						"sCurren" : Z.get("form-color-hsbS-current-"+idRandom),
						"bCurren" : Z.get("form-color-hsbB-current-"+idRandom),
						"hRange" : Z.get("form-color-hsbH-"+idRandom),
						"sRange" : Z.get("form-color-hsbS-"+idRandom),
						"bRange" : Z.get("form-color-hsbB-"+idRandom)
				}
				
				//controls events
				var currentRanges = [that.vars.hCurren,that.vars.sCurren,that.vars.bCurren],
						colorRanges = [that.vars.hRange,that.vars.sRange,that.vars.bRange];
				
				//current hex
				for(var i=0;i<3;i++){
						(function(index){
								Z.on(currentRanges[index],"change",function(){
										var maxNum = parseInt(this.getAttribute("max"),10),
												value = this.value;
										if(value > maxNum){
												this.value = maxNum;
										}else if(value < 0){
												this.value = 0;
										}
										var hsb = {"h":currentRanges[0].value,"s":currentRanges[1].value,"b":currentRanges[2].value},
												initRangeHSB = ["initRangeH","initRangeS","initRangeB"];
										that.setColor({
												"color" : hsb,
												"oType" : "hsb",
												"initControls" : [initRangeHSB[index],"initInput"]
										});
								});
								Z.on(colorRanges[index],"change",function(){
										var hsb = {"h":colorRanges[0].value,"s":colorRanges[1].value,"b":colorRanges[2].value},
												initCurrentHSB = ["initCurrentH","initCurrentS","initCurrentB"];
										that.setColor({
												"color" : hsb,
												"oType" : "hsb",
												"initControls" : [initCurrentHSB[index],"initInput"]
										});
								});
						})(i);
				}
				Z.on(that.vars.hsbInput,"change",function(){
						var hex = this.value;
						that.setColor({
								"color" : hex,
								"oType" : "hex"
						});
				});
				Z.on(that.vars.hsbInput,"focus",function(){
						Z.each(Z.getElementsByClassName("form-color-picker"),function(node){
								Z.setStyle(node,"display","none");
						});
						Z.setStyle(that.vars.picker,"display","block");
				});
				that.setColor({
						"color" : that.config.hex
				});
		}
		ColorControl.prototype.initInput = function(hex){
				var input = this.vars.hsbInput;
				input.value = input.style.backgroundColor = hex;
		}
		ColorControl.prototype.initRangeH = function(hsb){
				this.vars.hRange.value = hsb.h;
		}
		ColorControl.prototype.initRangeS = function(hsb){
				this.vars.sRange.value = hsb.s;
		}
		ColorControl.prototype.initRangeB = function(hsb){
				this.vars.bRange.value = hsb.b;
		}
		ColorControl.prototype.initCurrentH = function(hsb){
				this.vars.hCurren.value = hsb.h;
		}
		ColorControl.prototype.initCurrentS = function(hsb){
				this.vars.sCurren.value = hsb.s;
		}
		ColorControl.prototype.initCurrentB = function(hsb){
				this.vars.bCurren.value = hsb.b;
		}
		ColorControl.prototype.setColor = function(parms){
				var that = this,
						oType = parms.oType?parms.oType:"",
						callback = parms.callback != undefined?parms.callback:true;
						initControls = parms.initControls?parms.initControls:["initRangeH","initRangeS","initRangeB","initCurrentH","initCurrentS","initCurrentB","initInput"];
				var hex = that.changeColor(parms.color,"hex",oType);
				if(hex == "error"){
					//Z.log("error hex color");
					return;
				}
				var hsb = that.changeColor(parms.color,"hsb",oType);
				for(var i=0,j=initControls.length;i<j;i++){
						var cInit = initControls[i];
						if(cInit == "initInput"){
								that[cInit](hex);
						}else{
								that[cInit](hsb);
						}
				}
				that.config.hex = hex;
				that.config.hsb = hsb;
				if(callback){
						that.onColorChange(hex);
				}
		}
		ColorControl.prototype.onColorChange = function(){
				this.config.afterChange(this.getColor());
		}
		ColorControl.prototype.getColor = function(){
				return this.config.hex;
		}
		ColorControl.prototype.changeColor = function(color,nType,oType){
				var that = this;
				var oType = oType?oType:that.getColorType(color);
				switch(oType){
						case "hsb":
								if(!that.ensureHSB(color)){
										//Z.log(color + " is not a valid hsb color!");
										return "error";
								}
								if(nType == "hex"){
										return Z.Color.rgbToHex(Z.Color.hsbToRgb(color));
								}else if(nType == "rgb"){
										return Z.Color.hsbToRgb(color);
								}
								break;
						case "hex":
								if(!that.ensureHEX(color)){
										//Z.log(color + " is not a valid hex color!");
										return "error";
								}
								if(nType == "hsb"){
										return Z.Color.rgbToHsb(Z.Color.hexToRgb(Z.Color.hexToComplate(color)));
								}else if(nType == "rgb"){
										return Z.Color.hexToRgb(Z.Color.hexToComplate(color));
								}
								break;
						case "rgb":
								if(!that.ensureRGB(color)){
										//Z.log(color + " is not a valid rgb color!");
										return "error";
								}
								if(nType == "hsb"){
										return Z.Color.rgbToHsb(color);
								}else if(nType == "hex"){
										return Z.Color.rgbToHex(color);
								}
								break;
						default:
								return "error"
								break;
				}
				return color;
		}
		ColorControl.prototype.getColorType = function(color){
			var that = this;
			if(that.ensureHSB(color)){
				return "hsb";
			}else if(that.ensureHEX(color)){
				return "hex";
			}else if(that.ensureRGB(color)){
				return "rgb";
			}
			return "error";
		}
		ColorControl.prototype.ensureHSB = function(hsb){
				var reg = /^\d$|^[1-9]\d$|^100$/;
				if(typeof hsb == "object" && /^\d$|^[1-9]\d$|^[1-2]\d{2}$|^3[0-5][0-9]$|^360$/.test(hsb.h) && reg.test(hsb.s) && reg.test(hsb.b)){
						return true;
				}
				return false;
		}
		ColorControl.prototype.ensureHEX = function(hex){
				if(typeof hex == "string" && /^#[0-9a-fA-F]{6}$|^#[0-9a-fA-F]{3}$/.test(hex)){
						return true;
				}
				return false;
		}
		ColorControl.prototype.ensureRGB = function(rgb){
				var a = rgb.replace(/rgb\(|\)/g,"").split(","),
						reg = /^\d$|^[1-9]\d$|^1\d{2}$|^2[0-4]\d$|^25[0-5]$/;
				if(typeof rgb == "string" && reg.test(parseInt(a[0],10)) && reg.test(parseInt(a[1],10)) && reg.test(parseInt(a[2],10))){
						return true;
				}else if(/^transparent$|^rgba(0, 0, 0, 0)$/.test(rgb)){
						return true;
				}
				return false;
		}
		//common function
		function $(id){
				return document.getElementById(id);
		}
		function addEvent(node,type,callback){
				if(typeof node === "string"){node = $(node);}
				if(!node){return}
				node.addEventListener(type,callback,false);
		}
		function getComputedStyle(node,property){
				return window.getComputedStyle(node,null)[property];
		}
		function getStyle(node,property){
				if(node.length){
						node = node[0];
				}
				if(property){
						property = cssExtension(property);
						switch (property){
								case "borderTop":
										property = ["borderTopWidth","borderTopStyle","borderTopColor"];
										break;
								case "borderRight":
										property = ["borderRightWidth","borderRightColor","borderRightStyle"];
										break;
								case "borderBottom":
										property = ["borderBottomWidth","borderBottomColor","borderBottomStyle"];
										break;
								case "borderLeft":
										property = ["borderLeftWidth","borderLeftColor","borderLeftStyle"];
										break;
								case "borderRadius":
										property = ["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"];
										break;
								case "padding":
										property = ["paddingTop","paddingRight","paddingBottom","paddingLeft"];
										break;
								case "margin":
										property = ["marginTop","marginRight","marginBottom","marginLeft"];
										break;
								case "listStyle":
										property = ["listStylePosition","listStyleType"];
										break;
						}
						if(typeof property == "string"){
								return getComputedStyle(node,property);
						}else{
								var value = [];
								for(var i=0,j=property.length;i<j;i++){
										value[i] = getComputedStyle(node,property[i]);
								}
								return value.join(" ");
						}
				}else{
						return node.getAttribute("style");
				}
		}
		function trim(string){
		  		if(string == ""){
				  	return "";
				}
				return string.replace(/^\s*/,"").replace(/\s*$/,"");
		}
		function addClass(node,class){
				if(hasClass(node,class)){return}
				var pClass = trim(node.className);
				if(pClass == ""){
						node.className = class;
				}else{
						node.className = pClass + " " + class;
				}
		}
		function removeClass(node,class){
				node.className = trim(node.className.replace(class,""));
		}
		function hasClass(node,class){
				var classes = node.className.split(" ");
				for(var i=0,j=classes.length;i<j;i++){
					if(classes[i] == class){
						return true;
					}
				}
				return false;
		}
		function getCombinedStyle(style){
				var styles = trim(style).split(";"),
						cssRules = {},
						styleProperty = "",
						deleteFun = function(array){
								for(var i=0,j=array.length;i<j;i++){
										delete cssRules[array[i]];
								}
						},
						layoutFun = function(list,property,defaultValue,space){
								var t = cssRules[list[0]],
									r = cssRules[list[1]],
									b = cssRules[list[2]],
									l = cssRules[list[3]];
								if(t||r||b||l){
										t = t?t:defaultValue;
										r = r?r:defaultValue;
										b = b?b:defaultValue;
										l = l?l:defaultValue;
										if(t == r && t == b &&	t == l){
											cssRules[property] = t;
										}else{
											cssRules[property] = t+space+r+space+b+space+l;
										}
										deleteFun(list);
								}
						};
				for(var i=0,j=styles.length-1;i<j;i++){
						if(styles[i]==""){continue;}
						var s = styles[i].split(": "),  //[HACK]chrome has " "，use“:”to split is error width "url(http://xxx)”
							s0 = trim(s[0]),
							s1 = trim(s[1]),
							color = s1.match(/rgb\(.+\)/);
						if(color){
							color = color[0];
							s1 = s1.replace(color,Z.Color.rgbToHex(color));
						}
						cssRules[s0] = s1;
				}
				//combine border
				var borderTop = ["border-top-width","border-top-style","border-top-color"],
						borderRight = ["border-right-width","border-right-style","border-right-color"],
						borderBottom = ["border-bottom-width","border-bottom-style","border-bottom-color"],
						borderLeft = ["border-left-width","border-left-style","border-left-color"],
						borders = {
								"border-top" : borderTop,
								"border-right" : borderRight,
								"border-bottom" : borderBottom,
								"border-left" : borderLeft
						};
				if(
					 	typeof cssRules[borderTop[0]] != "undefined" &&
						typeof cssRules[borderTop[1]] != "undefined" &&
						typeof cssRules[borderTop[2]] != "undefined" &&
						cssRules[borderTop[0]] == cssRules[borderRight[0]] && 
						cssRules[borderTop[0]] == cssRules[borderBottom[0]] && 
						cssRules[borderTop[0]] == cssRules[borderLeft[0]] &&
						cssRules[borderTop[1]] == cssRules[borderRight[1]] &&
						cssRules[borderTop[1]] == cssRules[borderBottom[1]] &&
						cssRules[borderTop[1]] == cssRules[borderLeft[1]] &&
						cssRules[borderTop[2]] == cssRules[borderRight[2]] && 
						cssRules[borderTop[2]] == cssRules[borderBottom[2]] &&
						cssRules[borderTop[2]] == cssRules[borderLeft[2]]
				){
						if(cssRules[borderTop[1]]=="none" || cssRules[borderTop[0]]=="0px"){
								cssRules["border"] = "none";
						}else{
								cssRules["border"] = cssRules[borderTop[0]]+" "+cssRules[borderTop[1]]+" "+cssRules[borderTop[2]];
						}
						for(var i in borders){
								var b = borders[i];
								for(var j=0;j<3;j++){
										delete cssRules[b[j]];
								}
						}
				}else{
						for(var i in borders){
								var b = borders[i];
								if(cssRules[b[0]]&&cssRules[b[1]]&&cssRules[b[2]]){	
										if(cssRules[b[1]]=="none" || cssRules[b[0]]=="0px"){
												cssRules[i] = "none";
										}else{
												cssRules[i] = cssRules[b[0]]+" "+cssRules[b[1]]+" "+cssRules[b[2]];
										}
										deleteFun(b);
								}
						}
				}
				//combine padding
				layoutFun(["padding-top","padding-right","padding-bottom","padding-left"],"padding","0px"," ");
				//combine margin
				layoutFun(["margin-top","margin-right","margin-bottom","margin-left"],"margin","0px"," ");
				//combine border-radius
				layoutFun(["border-top-left-radius","border-top-right-radius","border-bottom-right-radius","border-bottom-left-radius"],"border-radius","0px 0px",",");
				for(var i in cssRules){
						styleProperty+=i+":"+cssRules[i]+";";
				}
				return styleProperty;
		}
		function cssExtension(property){
				if(property == "boxShadow"){
						property = "webkitBoxShadow";
				}
				return property;
		}
		function setStyle(node,property,value){
				var len = node.length;
				property = cssExtension(property);
				if(len){
						for(var i=0,j=len;i<j;i++){
								node[i].style[property] = value;
						}
				}else{
						node.style[property] = value;
				}
				updateStyles();
		}
		function getElementsByClassName(className){
				return document.getElementsByClassName(className);
		}
		function sendRequest(method,url,callback,data){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.open(method,url,true);
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState == 3 && callback.start){
					callback.start(xmlhttp);
				}else if((xmlhttp.readyState == 4 || xmlhttp.readyState == 0)&& callback.success){
					callback.success(xmlhttp);
				}else if(xmlhttp.status != 200 && xmlhttp.status != 304 && callback.fail){
					callback.fail(xmlhttp);
				}
			}
			xmlhttp.send(data);
		}
				
		//vars
		var visualFirebugCurrentNode = "",
				controls = {},
				mutilStart = false,
				mutilNodes = [],
				selectingClass = "visualFirebug-selecting",
				mouseoverClass = "visualFirebug-mouseover";
		
		//create nodes
		var editItems = '<div id="visualFirebug" class="visualFirebug-wrap">' +
										'  <div id="visualFirebug-option"><div id="visualFirebug-drag"></div><div id="visualFirebug-mini" title="'+getMSG("opt_mini")+'"><vfs></vfs><vfb></vfb></div><vfi id="visualFirebug-show-about" title="'+getMSG("opt_about")+'">!</vfi></div>' +
										'  <div id="visualFirebug-current-info">'+getMSG("title_node")+'：<vfcode id="visualFirebug-current-node">none</vfcode> x <vfcode id="visualFirebug-current-node-count">0</vfcode><vabbr id="visualFirebug-show-currentNode" title="'+getMSG("opt_cNode")+'">?</vabbr><vfi id="visualFirebug-open-all" title="'+getMSG("opt_unfoldAll")+'"><vfb></vfb><vfu></vfu></vfi><vfi id="visualFirebug-getStyles" title="'+getMSG("opt_showStyle")+'" class="vf-close">{}</vfi><vfi id="visualFirebug-getHTML" title="'+getMSG("opt_html")+'">&lt;&gt;</vfi><vfi id="visualFirebug-switch" title="'+getMSG("opt_turnOff")+'" class="vf-open"></vfi></div>' +
										'  <textarea id="visualFirebug-styles"></textarea>' +
										'  <ul id="visualFirebug-controls" class="vf-close">' +
										'  </ul>' +
										'</div>' +
										'<div id="visualFirebug-selectors" class="visualFirebug-wrap"></div>' +
										'<div id="visualFirebug-getHTML-wrap" class="visualFirebug-pop visualFirebug-wrap">' +
										'  <span id="visualFirebug-getHTML-title" class="visualFirebug-pop-title">HTML：</span><vfi id="visualFirebug-getHTML-close" class="visualFirebug-pop-close" title="'+getMSG("opt_close")+'">×</vfi>' +
										'  <textarea id="visualFirebug-getHTML-content"></textarea>' +
										'</div>' +
										'<div id="visualFirebug-about-wrap" class="visualFirebug-pop visualFirebug-wrap">' +
										'  <span id="visualFirebug-about-title" class="visualFirebug-pop-title">About：</span><vfi id="visualFirebug-about-close" class="visualFirebug-pop-close" title="'+getMSG("opt_close")+'">×</vfi>' +
										'  <div id="visualFirebug-about-content">' +
										'    <div id="visualFirebug-about-global" style="background-image:url('+chrome.extension.getURL('128.png')+')">' +
										'      <vftitle id="visualFirebug-about-name">Visual Firebug</vftitle>' +
										'      <p id="visualFirebug-about-version">v1.14</p>' +
										'    </div>' +
										'    <div id="visualFirebug-about-detail">' +
										'      <p id="visualFirebug-about-doc">Visual Firebug <a href="http://www.zhouqicf.com/visual-firebug" target="_blank">Documentation</a> , <a href="https://chrome.google.com/extensions/detail/lomkpheldlbkkfiifcbfifipaofnmnkn" target="_blank">Chrome extension</a></p>' +
										'      <p id="visualFirebug-about-author">© 2010 <a rel="work" href="http://www.koubei.com" target="_blank">KouBei</a> <a rel="team" href="http://ued.koubei.com" target="_blank">UED</a> - created by <a href="http://www.zhouqicf.com/about" target="_blank">Zhou Qi</a></p>' +
										'    </div>' +
										'  </div>' +
										'</div>';
		var editWrap = document.createElement("div");
		editWrap.innerHTML = editItems;
		document.getElementsByTagName("html")[0].appendChild(editWrap);
		
		//var nodes
		var vf = $("visualFirebug"),
				itemsWrap = vf.getElementsByTagName("ul")[0],
				cStyle = $("visualFirebug-styles"),
				selectorWrap = $("visualFirebug-selectors"),
				getHtmlWrap = $("visualFirebug-getHTML-wrap"),
				aboutWrap = $("visualFirebug-about-wrap"),
				getHtmlContent = $("visualFirebug-getHTML-content"),
				currentNode = $("visualFirebug-current-node"),
				cNodeCount = $("visualFirebug-current-node-count"),
				showCurrentNode = $("visualFirebug-show-currentNode");
		
		//html
		var htmls = {
				"fontSize" : 	'<vftitle><label for="visualFirebug-fontSize">'+getMSG("style_fz")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="fontSize"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="fontSize"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap"><input type="range" min="10" max="100" id="visualFirebug-fontSize"/><input type="text" class="visualFirebug-currentStyle" name="fontSize" min="10"/> (px)</div>',
				"lineHeight" :'<vftitle><label for="visualFirebug-lineHeight">'+getMSG("style_lh")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="lineHeight"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="lineHeight"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap"><input type="range" min="10" max="100" id="visualFirebug-lineHeight"/><input type="text" class="visualFirebug-currentStyle" name="lineHeight" min="10"/></div>',
				"fontFamily" :'<vftitle><label for="visualFirebug-fontFamily">'+getMSG("style_ff")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="fontFamily"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="fontFamily"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap">'+
											'  <select id="visualFirebug-fontFamily">' +
											'	   <optgroup label="Chinese">' +
											'	   <option selected="seleted" value="\u5B8B\u4F53,Serif">'+getMSG("style_ff_simsun")+'</option>' +
											'      <option value="\u5FAE\u8F6F\u96C5\u9ED1,\u9ED1\u4F53,Sans-Serif">'+getMSG("style_ff_MSYH")+'</option>' +
											'      <option value="\u9ED1\u4F53,Sans-Serif">'+getMSG("style_ff_simhei")+'</option>' +
											'      <option value="\u5E7C\u5706,Sans-Serif">'+getMSG("style_ff_youyuan")+'</option>' +
											'    </optgroup>' +
											'    <optgroup label="English">' +
											'      <option value="Helvetica,tahoma,Arial,Sans-Serif">Helvetica</option>' +
											'      <option value="Arial,Helvetica,tahoma,Sans-Serif">Arial</option>' +
											'      <option value="tahoma,Helvetica,Arial,Sans-Serif">tahoma</option>' +
											'      <option value="\'Lucida Grande\', Helvetica,Arial,Sans-Serif">Lucida Grande</option>' +
											'      <option value="Georgia,Serif">Georgia</option>' +
											'    </optgroup>' +
											'  </select>' +
											'</div>',
				"fontOther" :	'<vftitle><label>'+getMSG("style_fs")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="fontWeight,fontStyle,textDecoration" mutil="fontOther"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="fontWeight,fontStyle,textDecoration" mutil="fontOther"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap"><label><input type="checkbox" value="bold" name="fontWeight" id="visualFirebug-fontWeight"> '+getMSG("style_fs_bold")+'</label> <label><input type="checkbox" value="italic" name="fontStyle" id="visualFirebug-fontStyle"> '+getMSG("style_fs_italic")+'</label> <label><input type="checkbox" value="underline" name="textDecoration" id="visualFirebug-textDecoration"> '+getMSG("style_fs_underline")+'</div>',
				"textAlign" :	'<vftitle><label>'+getMSG("style_ta")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="textAlign"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="textAlign"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap"><label><input type="radio" value="left" name="textAlign" id="visualFirebug-textAlignLeft"> '+getMSG("style_ta_left")+'</label> <label><input type="radio" value="center" name="textAlign" id="visualFirebug-textAlignCenter"> '+getMSG("style_ta_center")+'</label> <label><input type="radio" value="right" name="textAlign" id="visualFirebug-textAlignRight"> '+getMSG("style_ta_right")+'</div>',
				"color" : 		'<vftitle><label for="visualFirebug-color">'+getMSG("style_c")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="color"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="color"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap" id="visualFirebug-color"></div>',
				"textShadow" :'<vftitle><label>'+getMSG("style_ts")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="textShadow"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="textShadow"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap">'+
											'		<vffieldset id="visualFirebug-textShadowWrap">' +
											'			<ol>' +
											'				<li><label>Degree:</label><div id="visualFirebug-textShadowDegree"></div></li>' +
											'				<li><label for="visualFirebug-textShadowDistance">Distance:</label><input type="range" min="0" max="100" id="visualFirebug-textShadowDistance" name="textShadowDistance"/><input type="text" class="visualFirebug-currentStyle" name="textShadowDistance"/> (px)</li>' +
											'				<li><label for="visualFirebug-textShadowSize">Size:</label><input type="range" min="0" max="100" id="visualFirebug-textShadowSize" name="textShadowSize"/><input type="text" class="visualFirebug-currentStyle" name="textShadowSize" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-textShadowColor">Color:</label><div id="visualFirebug-textShadowColor"></div></li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'</div>',
	"backgroundColor" : '<vftitle><label for="visualFirebug-backgroundColor">'+getMSG("style_bc")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="backgroundColor"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="backgroundColor"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap" id="visualFirebug-backgroundColor"></div>',
				"boxShadow" : '<vftitle><label>'+getMSG("style_bs")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="boxShadow"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="boxShadow"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap">'+
											'		<vffieldset id="visualFirebug-boxShadowWrap">' +
											'			<ol>' +
											'				<li><label>Inset:</label><label><input type="radio" value="inset" name="boxShadowInset" id="visualFirebug-boxShadowInset"> '+getMSG("style_bs_inset")+'</label> <label><input type="radio" value="outset" name="boxShadowInset" id="visualFirebug-boxShadowOutset"> '+getMSG("style_bs_outset")+'</label></li>' +
											'				<li><label>Degree:</label><div id="visualFirebug-boxShadowDegree"></div></li>' +
											'				<li><label for="visualFirebug-boxShadowDistance">Distance:</label><input type="range" min="0" max="100" id="visualFirebug-boxShadowDistance" name="boxShadowDistance"/><input type="text" class="visualFirebug-currentStyle" name="boxShadowDistance"/> (px)</li>' +
											'				<li><label for="visualFirebug-boxShadowSize">Size:</label><input type="range" min="0" max="20" id="visualFirebug-boxShadowSize" name="boxShadowSize"/><input type="text" class="visualFirebug-currentStyle" name="boxShadowSize" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-boxShadowColor">Color:</label><div id="visualFirebug-boxShadowColor"></div></li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'</div>',
				"border" : 		'<vftitle><label>'+getMSG("style_b")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="borderTop,borderRight,borderBottom,borderLeft,borderRadius" mutil="border"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="border,borderRadius" mutil="border"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap visualFirebug-editor-multi">'+
											'		<vffieldset id="visualFirebug-borderWidthWrap">' +
											'			<vflegend>'+getMSG("style_b_width")+'</vflegend>' +
											'			<label><input type="checkbox" class="set-same inputs" name="borderWidth" id="visualFirebug-sameBorderWidth"/> '+getMSG("opt_same")+'</label>' +
											'			<ol>' +
											'				<li><label for="visualFirebug-borderTopWidth">Top:</label><input type="range" min="0" max="20" id="visualFirebug-borderTopWidth" name="borderTopWidth"/><input type="text" class="visualFirebug-currentStyle" name="borderTopWidth" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-borderRightWidth">Right:</label><input type="range" min="0" max="20" id="visualFirebug-borderRightWidth" name="borderRightWidth"/><input type="text" class="visualFirebug-currentStyle" name="borderRightWidth" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-borderBottomWidth">Bottom:</label><input type="range" min="0" max="20" id="visualFirebug-borderBottomWidth" name="borderBottomWidth"/><input type="text" class="visualFirebug-currentStyle" name="borderBottomWidth" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-borderLeftWidth">Left:</label><input type="range" min="0" max="20" id="visualFirebug-borderLeftWidth" name="borderLeftWidth"/><input type="text" class="visualFirebug-currentStyle" name="borderLeftWidth" min="0"/> (px)</li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'		<vffieldset id="visualFirebug-borderStyleWrap">' +
											'			<vflegend>'+getMSG("style_b_style")+'</vflegend>' +
											'			<label><input type="checkbox" class="set-same selects" name="borderStyle" id="visualFirebug-sameBorderStyle"/> '+getMSG("opt_same")+'</label>' +
											'			<ol>' +
											'				<li>' +
											'					<label for="visualFirebug-borderTopStyle">Top:</label>' +
											'  				<select id="visualFirebug-borderTopStyle" name="borderTopStyle">' +
											'      			<option selected="seleted" value="none">none</option>' +
											'      			<option value="solid">solid</option>' +
											'      			<option value="dashed">dashed</option>' +
											'      			<option value="dotted">dotted</option>' +
											'      			<option value="double">double</option>' +
											'      			<option value="groove">groove</option>' +
											'      			<option value="inset">inset</option>' +
											'      			<option value="outset">outset</option>' +
											'      			<option value="ridge">ridge</option>' +
											'  				</select>' +
											'				</li>' +
											'				<li>' +
											'					<label for="visualFirebug-borderRightStyle">Right:</label>' +
											'  				<select id="visualFirebug-borderRightStyle" name="borderRightStyle">' +
											'      			<option selected="seleted" value="none">none</option>' +
											'      			<option value="solid">solid</option>' +
											'      			<option value="dashed">dashed</option>' +
											'      			<option value="dotted">dotted</option>' +
											'      			<option value="double">double</option>' +
											'      			<option value="groove">groove</option>' +
											'      			<option value="inset">inset</option>' +
											'      			<option value="outset">outset</option>' +
											'      			<option value="ridge">ridge</option>' +
											'  				</select>' +
											'				</li>' +
											'				<li>' +
											'					<label for="visualFirebug-borderBottomStyle">Bottom:</label>' +
											'  				<select id="visualFirebug-borderBottomStyle" name="borderBottomStyle">' +
											'      			<option selected="seleted" value="none">none</option>' +
											'      			<option value="solid">solid</option>' +
											'      			<option value="dashed">dashed</option>' +
											'      			<option value="dotted">dotted</option>' +
											'      			<option value="double">double</option>' +
											'      			<option value="groove">groove</option>' +
											'      			<option value="inset">inset</option>' +
											'      			<option value="outset">outset</option>' +
											'      			<option value="ridge">ridge</option>' +
											'  				</select>' +
											'				</li>' +
											'				<li>' +
											'					<label for="visualFirebug-borderLeftStyle">Left:</label>' +
											'  				<select id="visualFirebug-borderLeftStyle" name="borderLeftStyle">' +
											'      			<option selected="seleted" value="none">none</option>' +
											'      			<option value="solid">solid</option>' +
											'      			<option value="dashed">dashed</option>' +
											'      			<option value="dotted">dotted</option>' +
											'      			<option value="double">double</option>' +
											'      			<option value="groove">groove</option>' +
											'      			<option value="inset">inset</option>' +
											'      			<option value="outset">outset</option>' +
											'      			<option value="ridge">ridge</option>' +
											'  				</select>' +
											'				</li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'		<vffieldset id="visualFirebug-borderColorWrap">' +
											'			<vflegend>'+getMSG("style_b_color")+'</vflegend>' +
											'			<label><input type="checkbox" class="set-same inputs" name="borderColor" id="visualFirebug-sameBorderColor"/> '+getMSG("opt_same")+'</label>' +
											'			<ol>' +
											'				<li><label for="visualFirebug-borderTopColor">Top:</label><div id="visualFirebug-borderTopColor"></div></li>' +
											'				<li><label for="visualFirebug-borderRightColor">Right:</label><div id="visualFirebug-borderRightColor"></div></li>' +
											'				<li><label for="visualFirebug-borderBottomColor">Bottom:</label><div id="visualFirebug-borderBottomColor"></div></li>' +
											'				<li><label for="visualFirebug-borderLeftColor">Left:</label><div id="visualFirebug-borderLeftColor"></div></li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'		<vffieldset id="visualFirebug-borderRadiusWrap">' +
											'			<vflegend>'+getMSG("style_b_radius")+'</vflegend>' +
											'			<label><input type="checkbox" class="set-same inputs" name="borderRadius" id="visualFirebug-sameBorderRadius"/> '+getMSG("opt_same")+'</label>' +
											'			<ol>' +
											'				<li><label for="visualFirebug-borderRadiusTopLeft">TL:</label><input type="range" min="0" max="100" id="visualFirebug-borderRadiusTopLeft" name="borderTopLeftRadius"/><input type="text" class="visualFirebug-currentStyle" name="borderTopLeftRadius" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-borderRadiusTopRight">TR:</label><input type="range" min="0" max="100" id="visualFirebug-borderRadiusTopRight" name="borderTopRightRadius"/><input type="text" class="visualFirebug-currentStyle" name="borderTopRightRadius" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-borderRadiusBottomRight">BR:</label><input type="range" min="0" max="100" id="visualFirebug-borderRadiusBottomRight" name="borderBottomRightRadius"/><input type="text" class="visualFirebug-currentStyle" name="borderBottomRightRadius" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-borderRadiusBottomLeft">BL:</label><input type="range" min="0" max="100" id="visualFirebug-borderRadiusBottomLeft" name="borderBottomLeftRadius"/><input type="text" class="visualFirebug-currentStyle" name="borderBottomLeftRadius" min="0"/> (px)</li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'</div>',
				"listStyle" :	'<vftitle><label>'+getMSG("style_ls")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="listStyle"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="listStyle"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap">'+
											'  <select id="visualFirebug-listStyleType">' +
											'	     <option selected="seleted" value="none">'+getMSG("style_ls_none")+'</option>' +
											'      <option value="disc">disc</option>' +
											'      <option value="circle">circle</option>' +
											'      <option value="square">square</option>' +
											'      <option value="decimal">decimal</option>' +
											'      <option value="decimal-leading-zero">decimal-leading-zero</option>' +
											'      <option value="lower-roman">lower-roman</option>' +
											'      <option value="upper-roman">upper-roman</option>' +
											'      <option value="lower-alpha">lower-alpha</option>' +
											'      <option value="upper-alpha">upper-alpha</option>' +
											'      <option value="cjk-ideographic">cjk-ideographic</option>' +
											'  </select>' +
											'  <select id="visualFirebug-listStylePosition">' +
											'	     <option selected="seleted" value="inside">inside</option>' +
											'      <option value="outside">outside</option>' +
											'  </select>'+
											'</div>',
				"layout" : 		'<vftitle><label>'+getMSG("style_l")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="padding,margin" mutil="layout"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="padding,margin" mutil="layout"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap visualFirebug-editor-multi">'+
											'		<vffieldset id="visualFirebug-paddingWrap">' +
											'			<vflegend>'+getMSG("style_l_padding")+'</vflegend>' +
											'			<label><input type="checkbox" class="set-same inputs" name="padding" id="visualFirebug-samePadding"/> '+getMSG("opt_same")+'</label>' +
											'			<ol>' +
											'				<li><label for="visualFirebug-paddingTop">Top:</label><input type="range" min="0" max="100" id="visualFirebug-paddingTop" name="paddingTop"/><input type="text" class="visualFirebug-currentStyle" name="paddingTop" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-paddingRight">Right:</label><input type="range" min="0" max="100" id="visualFirebug-paddingRight" name="paddingRight"/><input type="text" class="visualFirebug-currentStyle" name="paddingRight" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-paddingBottom">Bottom:</label><input type="range" min="0" max="100" id="visualFirebug-paddingBottom" name="paddingBottom"/><input type="text" class="visualFirebug-currentStyle" name="paddingBottom" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-paddingLeft">Left:</label><input type="range" min="0" max="100" id="visualFirebug-paddingLeft" name="paddingLeft"/><input type="text" class="visualFirebug-currentStyle" name="paddingLeft" min="0"/> (px)</li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'		<vffieldset id="visualFirebug-marginWrap">' +
											'			<vflegend>'+getMSG("style_l_margin")+'</vflegend>' +
											'			<label><input type="checkbox" class="set-same inputs" name="margin" id="visualFirebug-sameMargin"/> '+getMSG("opt_same")+'</label>' +
											'			<ol>' +
											'				<li><label for="visualFirebug-marginTop">Top:</label><input type="range" min="0" max="100" id="visualFirebug-marginTop" name="marginTop"/><input type="text" class="visualFirebug-currentStyle" name="marginTop" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-marginRight">Right:</label><input type="range" min="0" max="100" id="visualFirebug-marginRight" name="marginRight"/><input type="text" class="visualFirebug-currentStyle" name="marginRight" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-marginBottom">Bottom:</label><input type="range" min="0" max="100" id="visualFirebug-marginBottom" name="marginBottom"/><input type="text" class="visualFirebug-currentStyle" name="marginBottom" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-marginLeft">Left:</label><input type="range" min="0" max="100" id="visualFirebug-marginLeft" name="marginLeft"/><input type="text" class="visualFirebug-currentStyle" name="marginLeft" min="0"/> (px)</li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'</div>',
				"size" :  		'<vftitle><label>'+getMSG("style_s")+'</label><vfi class="visualFirebug-arrow"></vfi><vfi class="visualFirebug-eye" title="'+getMSG("opt_hide")+'" data="width,height" mutil="size"></vfi><vfi class="visualFirebug-cancel" title="'+getMSG("opt_undo")+'" data="width,height" mutil="size"></vfi></vftitle>'+
											'<div class="visualFirebug-editorWrap">'+
											'		<vffieldset id="visualFirebug-size">' +
											'			<ol>' +
											'				<li><label for="visualFirebug-width">Width:</label><input type="range" min="0" max="1440" id="visualFirebug-width" name="width"/><input type="text" class="visualFirebug-currentStyle" name="width" min="0"/> (px)</li>' +
											'				<li><label for="visualFirebug-height">Height:</label><input type="range" min="0" max="900" id="visualFirebug-height" name="height"/><input type="text" class="visualFirebug-currentStyle" name="height" min="0"/> (px)</li>' +
											'			</ol>' +
											'		</vffieldset>' +
											'</div>'
		};
		
		//modules
		var loader = {
				"all" : [
						"listStyle",
						"fontSize",
						"lineHeight",
						"fontFamily",
						"fontOther",
						"color",
						"textAlign",
						"textShadow",
						"backgroundColor",
						"boxShadow",
						"border",
						"layout",
						"size"
				],
				"normal" : [
						"fontSize",
						"lineHeight",
						"fontFamily",
						"fontOther",
						"color",
						"textAlign",
						"textShadow",
						"backgroundColor",
						"boxShadow",
						"border",
						"layout",
						"size"
				],
				"list" : [
						"listStyle",
						"fontSize",
						"lineHeight",
						"fontFamily",
						"fontOther",
						"color",
						"textAlign",
						"textShadow",
						"backgroundColor",
						"boxShadow",
						"border",
						"layout",
						"size"
				],
				"img" : [
						"size",
						"backgroundColor",
						"border",
						"boxShadow",
						"layout"
				]
		};
		loader["li"] = loader["ol"] = loader["ul"] = loader.list;
		
		//events
		var events = {
				"common" : {
						"accountChange" : function(item){
								var items = item.getElementsByTagName("ol")[0].getElementsByTagName("input"),
										allSame = item.getElementsByTagName("input")[0];
								for(var i=0,j=items.length;i<j;i++){
										addEvent(items[i],"change",function(){
												var that = this,
														value = that.value,
														property = that.name,
														pOrN = (that.type=="range")?"nextSibling":"previousSibling";
												if(allSame.checked){
														property = allSame.name;
														for(var k=2,l=j;k<l;k++){
																items[k].value = items[k][pOrN].value = value;
														}
												}
												that[pOrN].value = value;
												setStyle(visualFirebugCurrentNode,property,value + "px");
										});
								}
						},
						"cAccountChange" : function(item,callback){
								var items = $("visualFirebug-item-"+item).getElementsByClassName("visualFirebug-currentStyle");
								for(var i=0,j=items.length;i<j;i++){
										addEvent(items[i],"change",function(){
												var that = this,
														value = that.value,
														property = that.name;
														
												that.value = that.previousSibling.value = value;
												if(callback){
														callback();
												}else{
														setStyle(visualFirebugCurrentNode,property,value + "px");
												}
										});
								}
						},
						"setSame" : function(node){
								addEvent(node,"click",function(e){
										var that = node,
												items = that.parentNode.parentNode.getElementsByTagName("ol")[0].getElementsByTagName(that.className.match(/inputs/)?"input":"select"),
												len = items.length,
												name = that.name,
												k = /inputs/.test(that.className)?2:1;
										if(!that.checked){
												for(;k<len;k++){
														items[k].disabled = false;
												}
										}else{
												var firstItem = items[0],
														value = firstItem.value;
												for(;k<len;k++){
														var cItem = items[k];
														cItem.value = value;
														cItem.disabled = true;
												}
												value = !isNaN(value)?value + "px":value;
												setStyle(visualFirebugCurrentNode,name,value);
												firstItem.focus();
										}
								});
						}
				},
				"fontSize" : function(){
						this.common.cAccountChange("fontSize",function(){
								var fontSize = $("visualFirebug-fontSize").value;
								if(fontSize<12){
										setStyle(visualFirebugCurrentNode,"webkitTextSizeAdjust","none");
								}else{
										setStyle(visualFirebugCurrentNode,"webkitTextSizeAdjust","");
								}
								setStyle(visualFirebugCurrentNode,"fontSize",fontSize + "px");
						});
						addEvent("visualFirebug-fontSize","change",function(e){
								var value = this.value;
								if(value<12){
										setStyle(visualFirebugCurrentNode,"webkitTextSizeAdjust","none");
								}else{
										setStyle(visualFirebugCurrentNode,"webkitTextSizeAdjust","");
								}
								setStyle(visualFirebugCurrentNode,"fontSize",value + "px");
								this.nextSibling.value = value;
						});
				},
				"lineHeight" : function(){
						addEvent("visualFirebug-lineHeight","change",function(e){
								var lineHeight = (this.value * 0.1).toFixed(1);
								setStyle(visualFirebugCurrentNode,"lineHeight",lineHeight);
								this.nextSibling.value = lineHeight;
						});
						
						var cEditor = $("visualFirebug-item-lineHeight").getElementsByClassName("visualFirebug-currentStyle")[0];
						addEvent(cEditor,"change",function(){
								var lineHeight = this.value;
								setStyle(visualFirebugCurrentNode,"lineHeight",lineHeight);
								this.previousSibling.value = lineHeight*10;
						});
				},
				"fontFamily" : function(){
						addEvent("visualFirebug-fontFamily","change",function(e){
								setStyle(visualFirebugCurrentNode,"fontFamily",this.value);
						});
				},
				"fontOther" : function(){
						var styles = [$("visualFirebug-fontWeight"),$("visualFirebug-fontStyle"),$("visualFirebug-textDecoration")];
						for(var i=0;i<3;i++){
								addEvent(styles[i],"click",function(e){
										var that = this;
										if(that.checked){
												setStyle(visualFirebugCurrentNode,that.name,that.value);
										}else{
												setStyle(visualFirebugCurrentNode,that.name,that.name=="textDecoration"?"none":"normal");
										}
								});
						}
				},
				"textAlign" : function(){
						var styles = [$("visualFirebug-textAlignLeft"),$("visualFirebug-textAlignCenter"),$("visualFirebug-textAlignRight")];
						for(var i=0;i<3;i++){
								addEvent(styles[i],"click",function(e){
										setStyle(visualFirebugCurrentNode,"textAlign",this.value);
								});
						}
				},
				"color" : function(){
						Z.loader("color",function(){
								controls.color = new ColorControl("visualFirebug-color",{
										"name" : "color",
										"afterChange" : function(hex){
												if(!visualFirebugCurrentNode){return};
												setStyle(visualFirebugCurrentNode,"color",hex);
										}
								});
						})
				},
				"textShadow" : function(){
						var distance = $("visualFirebug-textShadowDistance"),
								size = $("visualFirebug-textShadowSize");
						function setTextShadow(){
									var d = distance.value,
											degree = controls.textShadowDegree.getDegree(),
											hex = controls.textShadowColor.getColor(),
											x = Math.round(d*Math.cos(-degree*0.017453293)),
											y = Math.round(d*Math.sin(-degree*0.017453293));
									setStyle(visualFirebugCurrentNode,"textShadow",x+"px "+y+"px "+size.value+"px "+hex);
						}
						Z.loader("color",function(){
								controls.textShadowColor = new ColorControl("visualFirebug-textShadowColor",{
										"name" : "textShadowColor",
										"afterChange" : function(hex){
												if(!visualFirebugCurrentNode){return};
												setTextShadow();
										}
								});
						});
						
						Z.loader("degree",function(){
								controls.textShadowDegree = new DegreeControl("visualFirebug-textShadowDegree",{
										"afterChange" : function(degree){
												if(!visualFirebugCurrentNode){return};
												setTextShadow();
										}
								});
						});
						
						for(var items = [distance,size],i=0;i<2;i++){
								addEvent(items[i],"change",function(e){
										setTextShadow();
										this.nextSibling.value = this.value;
								});
						}
						this.common.cAccountChange("textShadow",function(){
								setTextShadow();
						});
				},
				"backgroundColor" : function(){
						Z.loader("color",function(){
								controls.backgroundColor = new ColorControl("visualFirebug-backgroundColor",{
										"name" : "backgroundColor",
										"afterChange" : function(hex){
												if(!visualFirebugCurrentNode){return};
												setStyle(visualFirebugCurrentNode,"backgroundColor",hex);
										}
								});
						});
				},
				"boxShadow" : function(){
						var inset = $("visualFirebug-boxShadowInset"),
								outset = $("visualFirebug-boxShadowOutset"),
								distance = $("visualFirebug-boxShadowDistance"),
								size = $("visualFirebug-boxShadowSize"),
								optinal;
						
						function setBoxShadow(){
									var optinal = inset.checked?"inset":"",
											d = distance.value,
											degree = controls.boxShadowDegree.getDegree(),
											hex = controls.boxShadowColor.getColor(),
											x = Math.round(d*Math.cos(-degree*0.017453293)),
											y = Math.round(d*Math.sin(-degree*0.017453293));
									setStyle(visualFirebugCurrentNode,"boxShadow",optinal+" "+x+"px "+y+"px "+size.value+"px "+hex);
						}
						
						Z.loader("color",function(){
								controls.boxShadowColor = new ColorControl("visualFirebug-boxShadowColor",{
										"name" : "boxShadowColor",
										"afterChange" : function(hex){
												if(!visualFirebugCurrentNode){return};
												setBoxShadow();
										}
								});
						});
						
						Z.loader("degree",function(){
								controls.boxShadowDegree = new DegreeControl("visualFirebug-boxShadowDegree",{
										"afterChange" : function(degree){
												if(!visualFirebugCurrentNode){return};
												setBoxShadow();
										}
								});
						});
						
						for(var items = [distance,size],i=0;i<2;i++){
								addEvent(items[i],"change",function(e){
										setBoxShadow();
										this.nextSibling.value = this.value;
								});


						}
						addEvent(inset,"click",function(e){
								setBoxShadow();
						});
						addEvent(outset,"click",function(e){
								setBoxShadow();
						});
						this.common.cAccountChange("boxShadow",function(){
								setBoxShadow();
						});
				},
				"listStyle" : function(){
						addEvent("visualFirebug-listStyleType","change",function(e){
								setStyle(visualFirebugCurrentNode,"listStyleType",this.value);
						});
						addEvent("visualFirebug-listStylePosition","change",function(e){
								setStyle(visualFirebugCurrentNode,"listStylePosition",this.value);
						});
				},
				"border" : function(){
						this.common.setSame($("visualFirebug-sameBorderWidth"));
						this.common.setSame($("visualFirebug-sameBorderStyle"));
						this.common.setSame($("visualFirebug-sameBorderRadius"));
						
						this.common.accountChange($("visualFirebug-borderWidthWrap"));
						this.common.accountChange($("visualFirebug-borderRadiusWrap"));
						
						var styles = $("visualFirebug-borderStyleWrap").getElementsByTagName("select");
						for(var i=0,j=4;i<j;i++){
								addEvent(styles[i],"change",function(){
										var that = this,
												style = that.value,
												allSame = $("visualFirebug-sameBorderStyle"),
												type = that.name;
										if(allSame.checked){
												type = allSame.name;
												for(var k=1,l=4;k<l;k++){
														styles[k].value = style;
												}
										}
										setStyle(visualFirebugCurrentNode,type,style);
								});
						}
						
						var nodes = $("visualFirebug-borderColorWrap").getElementsByTagName("ol")[0].getElementsByTagName("input");
						for(var colors = ["borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],i=0;i<4;i++){
								(function(index){
										var property = colors[index];
										Z.loader("color",function(){
												controls[property] = new ColorControl("visualFirebug-"+property,{
														"name" : property,
														"afterChange" : function(hex){
																if(!visualFirebugCurrentNode){return};
																if($("visualFirebug-sameBorderColor").checked){
																		setStyle(visualFirebugCurrentNode,"borderColor",hex);
																		setStyle([nodes[7],nodes[14],nodes[21]],"backgroundColor",hex);
																}else{
																		setStyle(visualFirebugCurrentNode,property,hex);
																}
														}
												});
										});
								})(i);
						}
						
						addEvent("visualFirebug-sameBorderColor","click",function(){
								if(this.checked){
										nodes[0].focus();
										var color = nodes[0].value;
										nodes[7].value = nodes[14].value = nodes[21].value = color;
										setStyle([nodes[7],nodes[14],nodes[21]],"backgroundColor",color);
										setStyle(visualFirebugCurrentNode,"borderColor",color);
										nodes[7].disabled = nodes[14].disabled = nodes[21].disabled = true;
								}else{
										nodes[7].disabled = nodes[14].disabled = nodes[21].disabled = false;
								}
						});
				},
				"layout" : function(){
						this.common.setSame($("visualFirebug-samePadding"));
						this.common.setSame($("visualFirebug-sameMargin"));
						this.common.accountChange($("visualFirebug-paddingWrap"));
						this.common.accountChange($("visualFirebug-marginWrap"));
				},
				"size" : function(){
						this.common.cAccountChange("size");
						var width = $("visualFirebug-width"),
								height = $("visualFirebug-height");
						for(var items = [width,height],i=0;i<2;i++){
								addEvent(items[i],"change",function(e){
										var that = this,
												value = that.value;
										setStyle(visualFirebugCurrentNode,that.name,value + "px");
										that.nextSibling.value = value;
								});
						}
				}
		};
		
		//init style
		var showCurrentStyle = {
				"colorNormal" : function(editor,node,style){
						var rgb = getStyle(node,style);
						setStyle(editor,"backgroundColor",rgb);
						editor.value = Z.Color.rgbToHex(rgb);
				},
				"fontSize" : function(node){
						var value = getStyle(node,"fontSize").replace(/px/g,""),
								editor = $("visualFirebug-fontSize");
						editor.value = editor.nextSibling.value = value;
				},
				"lineHeight" : function(node){
						var value = getStyle(node,"lineHeight").replace(/px/g,""),
								editor = $("visualFirebug-lineHeight");
						editor.value = value;
						editor.nextSibling.value = (value/10).toFixed(1);
				},
				"fontFamily" : function(node){
						$("visualFirebug-fontFamily").value = getStyle(node,"fontFamily");
				},
				"fontOther" : function(node){
						if(getStyle(node,"fontWeight") == "bold"){
								$("visualFirebug-fontWeight").checked = true;
						}else{
								$("visualFirebug-fontWeight").checked = false;
						}
						if(getStyle(node,"fontStyle") == "italic"){
								$("visualFirebug-fontStyle").checked = true;
						}else{
								$("visualFirebug-fontStyle").checked = false;
						}
						if(getStyle(node,"textDecoration") == "underline"){
								$("visualFirebug-textDecoration").checked = true;
						}else{
								$("visualFirebug-textDecoration").checked = false;
						}
				},
				"textAlign" : function(node){
						var align = getStyle(node,"textAlign"),
								styles = [$("visualFirebug-textAlignLeft"),$("visualFirebug-textAlignCenter"),$("visualFirebug-textAlignRight")];
						for(var i=0;i<3;i++){
								var that = styles[i];
								if(that.value == align){
										that.checked = true;
										i=3;
								}
						}
				},
				"color" : function(node){
						controls.color.setColor({
								"color" : getStyle(node,"color"),
								"callback" : false
						});
				},
				"textShadow" : function(node){
						var textShadow = getStyle(node,"boxShadow");
						var d = $("visualFirebug-textShadowDistance"),
								size = $("visualFirebug-textShadowSize");
						
						if(textShadow == "none"){
								controls.textShadowColor.setColor({
										"color" : "transparent",
										"callback" : false
								});
								controls.textShadowDegree.setDegree({
										"degree" : 0,
										"callback" : false
								});
								d.value = size.value = d.nextSibling.value = size.nextSibling.value = 0;
						}
				},
				"backgroundColor" : function(node){
						controls.backgroundColor.setColor({
								"color" : getStyle(node,"backgroundColor"),
								"callback" : false
						});
				},
				"boxShadow" : function(node){
						var textShadow = getStyle(node,"boxShadow");
						var inset = $("visualFirebug-boxShadowInset"),
								outset = $("visualFirebug-boxShadowOutset"),
								distance = $("visualFirebug-boxShadowDistance"),
								size = $("visualFirebug-boxShadowSize");
						if(textShadow == "none"){
								controls.boxShadowColor.setColor({
										"color" : "transparent",
										"callback" : false
								});
								controls.boxShadowDegree.setDegree({
										"degree" : 0,
										"callback" : false
								});
								outset.checked = true;
								distance.value = size.value = distance.nextSibling.value = size.nextSibling.value = 0;
						}
				},
				"border" : function(node){
						for(var colors = ["borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],i=0;i<4;i++){
								(function(index){
										var property = colors[index];
										controls[property].setColor({
												"color" : getStyle(node,property),
												"callback" : false
										});
								})(i);
						}
						for(var widths = ["borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth"],i=0;i<4;i++){
								var cWidth = widths[i],
										widthEditor = $("visualFirebug-"+cWidth);
								widthEditor.value = widthEditor.nextSibling.value = getStyle(node,cWidth).replace(/px/g,"");
						}
						for(var styles = ["borderTopStyle","borderRightStyle","borderBottomStyle","borderLeftStyle"],i=0;i<4;i++){
								$("visualFirebug-"+styles[i]).value = getStyle(node,styles[i]);
						}
						for(var radius = ["borderRadiusTopLeft","borderRadiusTopRight","borderRadiusBottomLeft","borderRadiusBottomRight"],i=0;i<4;i++){
								var cRadius = getStyle(node,radius[i]),
										radiusEditor = $("visualFirebug-"+radius[i]);
								if(!cRadius){
										radiusEditor.value = radiusEditor.nextSibling.value = 0;
								}else{
										radiusEditor.value = radiusEditor.nextSibling.value = cRadius.replace(/px/g,"");
								}
						}
				},
				"listStyle" : function(node){
						$("visualFirebug-listStyleType").value = getStyle(node,"listStyleType");
						$("visualFirebug-listStylePosition").value = getStyle(node,"listStylePosition");
				},
				"layout" : function(node){
						for(var paddings = ["paddingTop","paddingRight","paddingBottom","paddingLeft"],i=0;i<4;i++){
								var paddingEditor = $("visualFirebug-"+paddings[i]);
								paddingEditor.value = paddingEditor.nextSibling.value = getStyle(node,paddings[i]).replace(/px/g,"");
						}
						for(var margins = ["marginTop","marginRight","marginBottom","marginLeft"],i=0;i<4;i++){
								var marginEditor = $("visualFirebug-"+margins[i]);
								marginEditor.value = marginEditor.nextSibling.value = getStyle(node,margins[i]).replace(/px/g,"");
						}
				},
				"size" : function(node){
						var width = $("visualFirebug-width"),
								height = $("visualFirebug-height"),
								cWidth = getStyle(node,"width"),
								cHeight = getStyle(node,"height");
						if(cWidth != "auto"){
								width.value = width.nextSibling.value = cWidth.replace(/px/g,"");
						}
						if(cHeight != "auto"){
								height.value = height.nextSibling.value = cHeight.replace(/px/g,"");
						}
				}
		};
		
		(function(){
				//init events
				for(var i=0,j=loader.all.length;i<j;i++){
						var citem = loader.all[i];
						var li = document.createElement("li");
						li.innerHTML = htmls[citem];
						itemsWrap.appendChild(li);
						addClass(li,"visualFirebug-item");
						li.id = "visualFirebug-item-"+citem;
						events[citem]();
				}
				
				//open or close controls
				var holders = vf.getElementsByTagName("vftitle");
				for(var i=0,j=holders.length;i<j;i++){
						addEvent(holders[i],"click",function(e){
								var li = this.parentNode;
								if(/visualFirebug-item-open/.test(li.className)){
										removeClass(li,"visualFirebug-item-open");
								}else{
										addClass(li,"visualFirebug-item-open");
								}
						});
				}
				
				//undo
				var cancels = getElementsByClassName("visualFirebug-cancel"),cssStuff = [];
				for(var i=0,j=cancels.length;i<j;i++){
						addEvent(cancels[i],"click",function(e){
								e.stopPropagation();
								var that = this,
										propertys = this.getAttribute("data").split(","),
										mutil = that.getAttribute("mutil");
								for(var k=0,l=propertys.length;k<l;k++){
										var property = propertys[k];
										setStyle(visualFirebugCurrentNode,property,"");
										cssStuff[property] = "";
										if(!mutil){
												showCurrentStyle[property](visualFirebugCurrentNode);
										}
								}
								if(mutil){
										showCurrentStyle[mutil](visualFirebugCurrentNode);
								}
						});
				}
				
				//hide style
				var eyes = getElementsByClassName("visualFirebug-eye");
				for(var i=0,j=eyes.length;i<j;i++){
						addEvent(eyes[i],"click",function(e){
								e.stopPropagation();
								var that = this,
										propertys = that.getAttribute("data").split(","),
										class = that.className,
										divWrap = that.parentNode.nextSibling,
										inputs = divWrap.getElementsByTagName("input"),
										selects = divWrap.getElementsByTagName("select");
								if(/vf-close/.test(class)){
										for(var k=0,l=propertys.length;k<l;k++){
												var property = propertys[k];
												setStyle(visualFirebugCurrentNode,property,cssStuff[property]);
										}
										for(var k=0,l=inputs.length;k<l;k++){
												var input = inputs[k];
												if(input.getAttribute("isDisabled") != "true"){
														input.disabled = false;
												}
												input.removeAttribute("isDisabled");
										}
										for(var k=0,l=selects.length;k<l;k++){
												var s = selects[k];
												if(s.getAttribute("isDisabled") != "true"){
														s.disabled = false;
												}
												s.removeAttribute("isDisabled");
										}
										removeClass(that,"vf-close");
										that.title = getMSG("opt_hide");
								}else{
										for(var k=0,l=propertys.length;k<l;k++){
												var property = propertys[k];
												cssStuff[property] = getStyle(visualFirebugCurrentNode,property);
												setStyle(visualFirebugCurrentNode,property,"");
										}
										for(var k=0,l=inputs.length;k<l;k++){
												var input = inputs[k];
												if(input.disabled){
														input.setAttribute("isDisabled","true");
												}
												input.disabled = true;
										}
										for(var k=0,l=selects.length;k<l;k++){
												var s = selects[k];
												if(s.disabled){
														s.setAttribute("isDisabled","true");
												}
												s.disabled = true;
										}
										addClass(that,"vf-close");
										that.title = getMSG("opt_show");
								}
						});
				}
		})();
		
		//show current node
		addEvent(document.body,"mouseover",function(e){
				if(!window.visualFirebugTurnOn){return}
				var target = e.target;
				if(hasClass(target,selectingClass)){return}
				addClass(target,mouseoverClass);
		});
		addEvent(document.body,"mouseout",function(e){
				if(!window.visualFirebugTurnOn){return}
				var target = e.target;
				if(hasClass(target,selectingClass)){return}
				removeClass(target,mouseoverClass);
		});
		addEvent(document.body,"click",function(e){
				if(!window.visualFirebugTurnOn){return;}
				e.preventDefault();
				var target = e.target;
				if(e.ctrlKey == 1){
						mutilStart = true;
						if(hasClass(target,selectingClass)){
								var newMutilNodes = [];
								for(var i=0,j=mutilNodes.length;i<j;i++){
										var cNode = mutilNodes[i];
										if(cNode != target){
												newMutilNodes.push(cNode);
										}
								}
								mutilNodes = newMutilNodes;
								removeClass(target,mouseoverClass);
								removeClass(target,selectingClass);
						}else{
								mutilNodes.push(target);
								addClass(target,mouseoverClass);
								addClass(target,selectingClass);
						}
						updateCurrentNode(mutilNodes,"mix");
				}else{
						mutilStart = false;
						mutilNodes = [];
						initTab([target],target.nodeName);
				}
		});
		addEvent(document.body,"keyup",function(e){
				if(!window.visualFirebugTurnOn){return}
				if(e.keyCode == 17 && mutilNodes.length > 0){
						for(var i =0,j=mutilNodes.length;i<j;i++){
								var node = mutilNodes[i];
								removeClass(node,mouseoverClass);
								removeClass(node,selectingClass);
						}
						initTab(mutilNodes,"mix");
						mutilNodes = [];
						mutilStart = false;
				}
		});
		
		var selectorItems,
				hideTimeout = null,
				addLi = function(text,class,target){
						var li = document.createElement("li");
						li.appendChild(document.createTextNode(text));
						li.className = class;
						selectorItems.appendChild(li);
						attacthFindNode(li,target);
				},
				getNode = function(li,target){
						if(li.className == "tag-selector"){
								var pTag,
										tag = target.nodeName.toLowerCase();
								if(tag == "li"){
										pTag = /^ol$|^ul$/;
								}else if(tag == "td" || tag == "th"){
										pTag = /^table$/;
								}
								while(!pTag.test(target.nodeName.toLowerCase())){
										target = target.parentNode;
								}
								return target.getElementsByTagName(tag);
						}else{
								return getElementsByClassName(li.firstChild.nodeValue.replace(".",""));
						}
				},
				attacthFindNode = function(li,target){
						var nodes = getNode(li,target);
						addEvent(li,"mouseover",function(e){
								for(var i=0,j=nodes.length;i<j;i++){
										addClass(nodes[i],mouseoverClass);
								}
						});
						addEvent(li,"mouseout",function(e){
								for(var i=0,j=nodes.length;i<j;i++){
										removeClass(nodes[i],mouseoverClass);
								}
						});
						addEvent(li,"click",function(e){
								selectorWrap.style.opacity = 0;
								selectorWrap.style.top = "-9999px";
								initTab(nodes,li.firstChild.nodeValue);
						});
				};
		addEvent(document.body,"contextmenu",function(e){
				if(!window.visualFirebugTurnOn){return}
				e.preventDefault();
				selectorWrap.style.opacity = 1;
				selectorWrap.style.top = e.pageY + "px";
				selectorWrap.style.left = e.pageX + "px";
				if(selectorItems){
						selectorWrap.removeChild(selectorItems);
				}
				selectorItems = document.createElement("ol");
				
				var node = e.target,
						classes = node.className,
						tag = e.target.nodeName.toLowerCase();
				
				if(tag == "li" || tag == "td" || tag == "th"){
						addLi(tag,"tag-selector",node);
				}

				if(classes && classes!=mouseoverClass){
						classes = classes.split(" ");
						for(var i=0,j=classes.length;i<j;i++){
								var cClass = classes[i];
								if( trim(cClass)=="" || cClass==mouseoverClass){continue;}
								addLi("."+cClass,"class-selector",node);
						}
				}
				
				
				if(!selectorItems.childNodes[0]){
						if(hideTimeout){clearTimeout(hideTimeout);}
						var li = document.createElement("li");
						li.appendChild(document.createTextNode("no selector"));
						li.className = "no-selector";
						selectorItems.appendChild(li);
						hideTimeout = setTimeout(function(e){
								selectorWrap.style.opacity = 0;
								selectorWrap.style.top = "-9999px";
						},1000);
				}
				selectorWrap.appendChild(selectorItems);
		});
		
		var inputs = itemsWrap.getElementsByTagName("input"),
				selects = itemsWrap.getElementsByTagName("select"),
				eyes = getElementsByClassName("visualFirebug-eye");
		function initTab(node,selector){
				var items = [],nodeType = node[0].nodeName.toLowerCase();
				if(!/\.|^mix$/.test(selector) && loader[nodeType]){
						items = loader[nodeType];
				}else{
						items = loader["normal"];
				}
				for(var i=0,j=inputs.length;i<j;i++){
						var input = inputs[i];
						input.disabled = false;
						if(input.type == "checkbox"){
								input.checked = false;
						}
				}
				for(var i=0,j=selects.length;i<j;i++){
						selects[i].disabled = false;
				}
				for(var i=0,j=eyes.length;i<j;i++){
						eyes[i].className = "visualFirebug-eye";
				}
				for(var i=0,j=loader.all.length;i<j;i++){
						var citem = loader.all[i];
						setStyle($("visualFirebug-item-"+citem),"display","");
				}
				visualFirebugCurrentNode = node;
				var show = /visualFirebug-allOpen/.test(vf.className);
				for(var i=0,j=items.length;i<j;i++){
						var citem = items[i];
						var li = $("visualFirebug-item-"+citem);
						li.style.display = "block";
						showCurrentStyle[citem](visualFirebugCurrentNode);
						if(show && !/visualFirebug-item-open/.test(li.className)){
								addClass(li,"visualFirebug-item-open");
						}
				}
				
				miniOptin.open();
				itemsWrap.className = "";
				updateCurrentNode(visualFirebugCurrentNode,selector);
				updateStyles();
		}
		
		function updateCurrentNode(nodes,selector){
				currentNode.firstChild.nodeValue = selector.length>15?selector.substring(0,15)+"...":selector;
				cNodeCount.firstChild.nodeValue = nodes.length?nodes.length:0;
		}
		
		function updateStyles(){
				if(!visualFirebugCurrentNode || vfdrag || !window.visualFirebugTurnOn){return;} //fix -webkit-user-select
				var style = getStyle(visualFirebugCurrentNode);
				if(!style){
					cStyle.value = "";
				}else{
					cStyle.value = getCombinedStyle(style);
				}
		}
		
		//open all controls
		var openAll = $("visualFirebug-open-all");
		addEvent(openAll,"click",function(e){
				var lis = getElementsByClassName("visualFirebug-item");
				if(/visualFirebug-allOpen/.test(vf.className)){
						openAll.title = getMSG("opt_unfoldAll");
						removeClass(vf,"visualFirebug-allOpen");
						for(var i=0,j=lis.length;i<j;i++){
								var li = lis[i];
								removeClass(li,"visualFirebug-item-open");
						}
				}else{
						openAll.title = getMSG("opt_foldAll");
						addClass(vf,"visualFirebug-allOpen");
						for(var i=0,j=lis.length;i<j;i++){
								var li = lis[i];
								if(!/visualFirebug-item-open/.test(li.className)){
										addClass(li,"visualFirebug-item-open");
								}
						}
				}
		});
		
		var miniOptin = {
				"node" : $("visualFirebug-mini"),
				"close" : function(){
						var that = this.node;
						that.className = "";
						that.title = getMSG("opt_unfold");
				},
				"open" : function(){
						var that = this.node;
						that.className = "vf-close";
						that.title = getMSG("opt_mini");
				} 
		};
		
		//min
		addEvent($("visualFirebug-mini"),"click",function(e){
				var that = this;
				if(that.className=="vf-close"){
						miniOptin.close();
						itemsWrap.className = "vf-close";
				}else{
						miniOptin.open();
						itemsWrap.className = "";
				}
		});
		
		//show current node
		addEvent(showCurrentNode,"mouseover",function(e){
				if(!window.visualFirebugTurnOn || !visualFirebugCurrentNode || mutilStart){return}
				for(var i=0,j=visualFirebugCurrentNode.length;i<j;i++){
						addClass(visualFirebugCurrentNode[i],mouseoverClass);
				}
		});
		addEvent(showCurrentNode,"mouseout",function(e){
				if(!window.visualFirebugTurnOn || !visualFirebugCurrentNode || mutilStart){return}
				for(var i=0,j=visualFirebugCurrentNode.length;i<j;i++){
						removeClass(visualFirebugCurrentNode[i],mouseoverClass);
				}
		});
		
		//turn on
		addEvent($("visualFirebug-switch"),"click",function(e){
				var that = this;
				if(that.className=="vf-open"){
						window.visualFirebugTurnOn = false;
						that.className = "vf-close";
						that.title = getMSG("opt_turnOn");
				}else{
						window.visualFirebugTurnOn = true;
						that.className = "vf-open";
						that.title = getMSG("opt_turnOff");
				}
		});
		
		//get style
		addEvent($("visualFirebug-getStyles"),"click",function(e){
				var that = this;
				if(that.className=="vf-open"){
						that.className = cStyle.className = "vf-close";
						that.title = getMSG("opt_showStyle");
				}else{
						cStyle.className = that.className = "vf-open";
						that.title = getMSG("opt_hideStyle");
				}
		});
		
		//get HTML
		addEvent($("visualFirebug-getHTML"),"click",function(){
				sendRequest("GET",window.location.href,{
						start : function(){
								addClass(getHtmlWrap,"loadding");
								getHtmlContent.value = "loadding...";
						},
						success : function(o){
								getHtmlContent.value = o.responseText.replace(/<\/head>[\s\S]*<\/html[^>]*>/i,document.body.outerHTML);
								addClass(getHtmlWrap,"vf-open");
						}
				},null);
		});
		addEvent($("visualFirebug-getHTML-close"),"click",function(){
				removeClass(getHtmlWrap,"vf-open");
				removeClass(getHtmlWrap,"loadding");
		});
		
		//about
		addEvent($("visualFirebug-show-about"),"click",function(){
				addClass(aboutWrap,"vf-open");
		});
		addEvent($("visualFirebug-about-close"),"click",function(){
				removeClass(aboutWrap,"vf-open");
		});
				
		//drag
		var preXY = {},
				vfdrag = false,
				dragHolder = $("visualFirebug-drag");
		addEvent(dragHolder,"mousedown",function(e){
				document.body.style.webkitUserSelect = vf.style.webkitUserSelect = "none";
				vfdrag = true;
				vf.style.opacity = 0.8;
				preXY.x = e.pageX + (getStyle(vf,"right").replace("px","")-0);
				preXY.y = e.pageY - (getStyle(vf,"top").replace("px","")-0);
		});
		addEvent(document,"mouseup",function(e){
				if(vfdrag){
						document.body.style.webkitUserSelect = vf.style.webkitUserSelect = "";
						vfdrag = false;
						vf.style.opacity = 1;
				}
		});
		addEvent(document,"mousemove",function(e){
				if (!vfdrag) { return;}
				setStyle(vf,"top",(e.pageY - preXY.y) + "px");
				setStyle(vf,"right",(preXY.x - e.pageX) + "px");
		});
})();
